<template>
	<view class="form-page">
		<view class="form-title">
			<p>1. 在这里输入中文词语</p>
			<input v-model.trim="chinese" class="chinese" :disabled="update" type="text" maxlength="5">
		</view>
		<view class="form-left">
			<view v-show="step > 1">
				<p>2.输入一个英文单词</p>
				<input v-model.trim="english1" class="english" type="text" maxlength="40">
			</view>
			<view v-show="step > 3">
				<p style="margin-top: 50rpx;">为Ta造句吧</p>
				<p style="margin-top: 30rpx;">中文例句1：</p>
				<input v-model.trim="eng1_eg1_cn" class="chinese" type="text" maxlength="100">
				<p>英文例句1：</p>
				<input v-model.trim="eng1_eg1_en" class="english" type="text" maxlength="300">
				<view v-show="step > 4">
					<p style="margin-top: 50rpx;">中文例句2：</p>
					<input v-model.trim="eng1_eg2_cn" class="chinese" type="text" maxlength="100">
					<p>英文例句2：</p>
					<input v-model.trim="eng1_eg2_en" class="english" type="text" maxlength="300">
				</view>
				<view v-show="step > 5">
					<p style="margin-top: 50rpx;">中文例句3：</p>
					<input v-model.trim="eng1_eg3_cn" class="chinese" type="text" maxlength="100">
					<p>英文例句3：</p>
					<input v-model.trim="eng1_eg3_en" class="english" type="text" maxlength="300">
				</view>
			</view>
		</view>
		<view class="form-right">
			<view v-show="step > 2">
				<p>3.另一个英文单词</p>
				<input v-model.trim="english2" class="english" type="text" maxlength="40">
			</view>
			<view v-show="step > 6">
				<p style="margin-top: 50rpx;">为Ta造句吧</p>
				<p style="margin-top: 30rpx;">中文例句1：</p>
				<input v-model.trim="eng2_eg1_cn" class="chinese" type="text" maxlength="100">
				<p>英文例句1：</p>
				<input v-model.trim="eng2_eg1_en" class="english" type="text" maxlength="300">
				<view v-show="step > 7">
					<p style="margin-top: 50rpx;">中文例句2：</p>
					<input v-model.trim="eng2_eg2_cn" class="chinese" type="text" maxlength="100">
					<p>英文例句2：</p>
					<input v-model.trim="eng2_eg2_en" class="english" type="text" maxlength="300">
				</view>
				<view v-show="step > 8">
					<p style="margin-top: 50rpx;">中文例句3：</p>
					<input v-model.trim="eng2_eg3_cn" class="chinese" type="text" maxlength="100">
					<p>英文例句3：</p>
					<input v-model.trim="eng2_eg3_en" class="english" type="text" maxlength="300">
				</view>
			</view>
		</view>
		<view class="form-submit">
			<button type="default" @click="goBack">取 消</button>
			<button type="primary" @click="submit">{{update?'修 改':'提 交'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:'form-page',
		data () {
			return {
				update: false,
				chinese: '',
				english1: '',
				english2: '',
				eng1_eg1_cn: '',
				eng1_eg1_en: '',
				eng1_eg2_cn: '',
				eng1_eg2_en: '',
				eng1_eg3_cn: '',
				eng1_eg3_en: '',
				eng2_eg1_cn: '',
				eng2_eg1_en: '',
				eng2_eg2_cn: '',
				eng2_eg2_en: '',
				eng2_eg3_cn: '',
				eng2_eg3_en: '',
			}
		},
		computed:{
			step: function () {
				if (!this.chinese) {
					return 1
				}
				if (!this.english1) {
					return 2
				}
				if (!this.english2) {
					return 3
				}
				if (!this.eng1_eg1_cn || !this.eng1_eg1_en) {
					return 4
				}
				if (!this.eng1_eg2_cn || !this.eng1_eg2_en) {
					return 5
				}
				if (!this.eng1_eg3_cn || !this.eng1_eg3_en) {
					return 6
				}
				if (!this.eng2_eg1_cn || !this.eng2_eg1_en) {
					return 7
				}
				if (!this.eng2_eg2_cn || !this.eng2_eg2_en) {
					return 8
				}
				if (!this.eng2_eg3_cn || !this.eng2_eg3_en) {
					return 9
				}
				return 10
			}
		},
		onShow () {
			try {
			    let update = uni.getStorageSync('update')
				if (update && update.chinese) {
					this.update = true
					this.chinese = update.chinese
					this.english1 = update.english1
					this.english2 = update.english2
					this.eng1_eg1_cn = update.eng1_eg1_cn
					this.eng1_eg1_en = update.eng1_eg1_en
					this.eng1_eg2_cn = update.eng1_eg2_cn
					this.eng1_eg2_en = update.eng1_eg2_en
					this.eng1_eg3_cn = update.eng1_eg3_cn
					this.eng1_eg3_en = update.eng1_eg3_en
					this.eng2_eg1_cn = update.eng2_eg1_cn
					this.eng2_eg1_en = update.eng2_eg1_en
					this.eng2_eg2_cn = update.eng2_eg2_cn
					this.eng2_eg2_en = update.eng2_eg2_en
					this.eng2_eg3_cn = update.eng2_eg3_cn
					this.eng2_eg3_en = update.eng2_eg3_en
				} else {
					this.uodate = false
				}
			} catch (e) {
			    console.log('获取缓存出错', e)
			}
		},
		methods: {
			goBack () {
				uni.navigateBack()
			},
			submit () {
				if (!this.chinese) {
					uni.showToast({
					    title: '啥都没写，别乱提交！',
					    duration: 1000,
						icon: "none"
					});
					return
				}
				// 修改
				if(this.update) {
					try{
						 let value = uni.getStorageSync('words');
						 let obj = {
						 	level: 0, // 预留字段
						 	date: Date.parse(new Date()), // 时间
						 	...this.$data
						 }
						 let i = value.findIndex(e => e.chinese == obj.chinese)
						 value[i] = obj
						 try {
							uni.setStorageSync('words', value);
						 	uni.showToast({
						 	    title: '保存成功！',
						 	    duration: 1000,
						 		icon: "success"
						 	});
						 	setTimeout(() => {
						 		this.goBack()
						 	}, 1100)
						 } catch (e) {
						     uni.showToast({
						         title: '保存失败，请重试！',
						         duration: 1000,
						     	icon: "none"
						     });
						 }
					}catch(e){
						//TODO handle the exception
					}
					return
				}
				// 新增
				try {
				    let value = uni.getStorageSync('words');
					let obj = {
						level: 0, // 预留字段
						date: Date.parse(new Date()), // 时间
						...this.$data
					}
				    if (value) {
						let i = value.findIndex(e => e.chinese == obj.chinese)
						if (i > -1) {
							uni.showToast({
							    title: '这个词语已经存在了！',
							    duration: 1000,
								icon: "none"
							});
							return
						} else {
							value.unshift(obj)
						}
				    } else {
						value = []
						value.unshift(obj)
					}
					try {
					    uni.setStorageSync('words', value);
						uni.showToast({
						    title: '保存成功！',
						    duration: 1000,
							icon: "success"
						});
						setTimeout(() => {
							this.goBack()
						}, 1100)
					} catch (e) {
					    uni.showToast({
					        title: '保存失败，请重试！',
					        duration: 1000,
					    	icon: "none"
					    });
					}

				} catch (e) {
				    uni.showToast({
				        title: '获取缓存失败，请重试！',
				        duration: 1000,
				    	icon: "none"
				    });
				}
			}
		}
	}
</script>

<style scoped>
	.form-page {
		width:100%;
		height:100%;
		background-color: #222;
		overflow: hidden;
		position: relative;
		color: #ddd;
		font-size: 36rpx;
		text-align: center;
	}
	input {
		width:100%;
		margin-top: 16rpx;
		font-weight: bold;
		color: #1661ab;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.form-title {
		padding-top: 40rpx;
		width:50%;
		margin: 0 auto;
	}
	.form-left {
		float:left;
		width:50%;
		height: 80%;
		margin-top: 4%;
		box-sizing: border-box;
		padding:20rpx;
	}
	.form-right {
		float:right;
		width:50%;
		height: 80%;
		margin-top: 4%;
		box-sizing: border-box;
		padding:20rpx;
	}
	.english {
		background-color: #e0c8d1;
	}
	.chinese {
		background-color: #d8e3e7;
	}
	.form-submit {
		position:absolute;
		bottom: 20rpx;
		width:100%;
	}
	.form-submit button{
		width:36%;
		display: inline-block;
		margin: 0 20rpx;
	}
</style>
